<html>

 <script>
	$(function () 
		{
          $('#datepicker1').datepicker({ dateFormat: 'dd/mm/yy' });
		});
 </script> 
<style>
table {
  border-collapse: collapse;
  border-spacing: none;
  }

thead th {
  background-color: #F7BE81;
  font-size: 12px;
  font-family: sans-serif;
  border:none;
  }

tbody td {
  font-size: 12px;
}

tr td:first-child,
tr th:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
</style>


 <div ng-app="myApp" ng-controller="ListOpbalMstCtrl">
 <h3>Opening Balance Transaction Entry</h3> <!--class = "well" -->
 <form  novalidate name="UpdateEmpMstForm" id="update-emp-form" method="post" action="">
   <table>
   <tr>
		<td>Date : <input type="date" ng-model="newopbalmast.opbaldate" required  class="input-medium"></td> 
	</tr>	
	<tr>
		<td>Type :<select class="input-medium" name = "trancat" ng-model="newopbalmast.trancat">
				<option id="BALANCE UPLOAD">BALANCE UPLOAD</option>
				<option id="CREDIT">CREDIT</option>
				<option id="DEBIT">DEBIT</option>
				<option id="TICKET BOOKING">TICKET BOOKING</option>
				<option id="TOP UP">TOP UP</option>
				<option id="TRANSFER">TRANSFER</option> 
				<option id="OTHERS">OTHERS</option>
				
				</select></td>
					<!--<select ng-model="newexpensemast.empname" ng-options="cust.empname for cust in employeemast" ></select> -->
		<!--<select  ng-model="newexpensemast.empid"  ng-options="newexpensemast.empid for val in employeeidmast "> </select></td>  
		    <select  ng-model="newexpensemast.empname"  ng-options="val.empname  as newexpensemast.empid for val in employeeidmast"> </select></td> -->
	<td>Supplier Name : </td>
	<td><select  ng-model="newopbalmast.custid" ng-options="val.custid as val.name  for val in customeridmast"> </select></td> 


    <td>Debit Amout: </td> <td><input type="text" ng-model="newopbalmast.amtpaid" class="input-small" name = "amtpaid"></td>
	<td>Credit Amout: </td> <td><input type="text" ng-model="newopbalmast.amtreceived" class="input-small" name = "amtreceived"></td>

	
	<td>Comment :</td> <td><textarea rows = "1" name="comment" ng-model="comment" capitalize></textarea></td>
	</tr>
        
   </table>
    <a class="btn btn-success" href="#/updtopbaldata/" ng-click="updtopbaldata(newopbalmast,comment)">Update</a>
    <a href="#/editemp/" ng-click="cancel()" class="btn">Clear</a>
 	<a class="btn btn-info pull-right"  href="#/saveopbaldata/" ng-click="saveopbaldata(newopbalmast,comment)">Save</a>
    <input type="text" ng-model="name" class="search-query" placeholder="Search">
     

            <table class="table table-striped table-condensed table-hover">
                <thead>
                    <tr>
                         <th>Id</th>
						 <th>Date</th>
					     <th><a href="" ng-click="predicate = 'custdesc'; reverse=!reverse">Supplier Name</a></th>
                         <th>Tranfer Type</th>
                         <th>Debit</th>
						 <th>Credit</th>
						 <th>Comment</th>
                        <!-- <th>Status</th> -->
                         <th>Delete</th>
                         <th>Edit</th>
                   </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in opbalmast | filter: name | orderBy:predicate:reverse | startingFrom:currentPage*pageSize | limitTo:pageSize">
						 <td>{{item.opbaltranid}}</td>
                         <td>{{item.opbaldate |  date:'dd/MM/yyyy'}}</td>
						 <td>{{item.custdesc}}</td>  
                         <td>{{item.trancat}}</td>
						 <td>{{item.amtpaid | number:0}}</td>
						 <td>{{item.amtreceived | number:0}}</td>
						 <td>{{item.comment}}</td>
                       <!--  <td>{{item.status}}</td>-->
                         <td><a href="#/deleteopbal/" ng-click="deleteopbal(item.opbaltranid)"> <img src="glyphicons_bin.png" alt="Delete"/></td> 
                         <td><a href="#/editopbal/" ng-click="edit(item.opbaltranid,item.comment)"> <img src="glyphicons_edit.png" alt="Edit"/></td> 
                    </tr>
               </tbody>
              <!--  <tr ng-show="editId===item.custid" ng-if="editId===item.custid">
            <td colspan="7" ng-include src="'editRow.html'"></td>
        </tr>-->
			
    </table>
                  
     <tfoot>
         Current Page  {{currentPage+1}} of {{Math.ceil(opbalmast.length/pageSize)}}
         <td colspan="6">
            <div class="pagination pull-right">
                <ul>
                     <!--  <li ng-class="{disabled: currentPage == 0}"> <a href ng-click="currentPage=currentPage-1">« Prev</a>  </li>-->
					<button class="btn btn-info" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> « Prev </button>
                        
						<li ng-repeat="n in range(opbalmast.length)" ng-class="{active: n == currentPage}"  ng-click="setPage()">
                         <a href ng-bind="n + 1">1</a>
						</li> 
					<button class="btn btn-info" ng-disabled="currentPage >= opbalmast.length/pageSize - 1" ng-click="currentPage=currentPage+1"> Next » </button>
      
				</ul>
			</div>
		</td>
	 </tfoot>
   
     </div>  
	  
  </body>
</html>
